<template>
  <Spin :spinning="loading.state.value">
    <Form
      ref="formRef"
      class="form"
      :colon="false"
      :scrollToFirstError="true"
      :model="form"
      :labelCol="{ span: 4 }"
      :wrapperCol="{ span: 12 }"
      :rules="rules"
    >
      <FormItem label="个人头像" :required="true" :wrapperCol="{ span: 6 }">
        <ImageUploader :value="form.avatar" :disabled-markdown="true" />
      </FormItem>
      <FormItem name="name" label="昵称" :required="true">
        <Input v-model:value="form.name" placeholder="昵称"></Input>
      </FormItem>
      <FormItem name="slogan" label="签名" :required="true">
        <Input v-model:value="form.slogan" placeholder="请输入签名"></Input>
      </FormItem>
      <Divider />
      <FormItem name="password" label="旧密码" :required="true">
        <InputPassword
          v-model:value="form.password"
          placeholder="旧密码"
          auto-complete="password"
        ></InputPassword>
      </FormItem>
      <FormItem name="new_password" label="新密码" :required="true">
        <InputPassword
          v-model:value="form.new_password"
          placeholder="新密码"
          auto-complete="new_password"
        ></InputPassword>
      </FormItem>
      <FormItem name="rel_new_password" label="确认新密码" :required="true">
        <InputPassword
          v-model:value="form.rel_new_password"
          placeholder="确认新密码"
          auto-complete="rel_new_password"
        ></InputPassword>
      </FormItem>
      <FormItem label=" ">
        <a-button type="primary" @click="handleSubmit">
          <CheckOutlined />
        </a-button>
      </FormItem>
    </Form>
  </Spin>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Divider, Form, FormItem, Input, InputPassword, Spin, notification } from 'ant-design-vue'
import { CheckOutlined } from '@ant-design/icons-vue'
import ImageUploader from '@/components/ImageUploader/index.vue'
import type { Auth } from '@/constants/auth'
import { useAdminState } from '@/state/admin'
import { putAuth } from '@/store/auth'
import { removeToken } from '@/services/token'
import { useLoading } from '@/handcer'

const loading = useLoading()
const adminAuth = useAdminState()

const router = useRouter()
const formRef = ref()
const form = reactive<Auth>({
  name: '',
  slogan: '',
  avatar: '',
  password: '',
  new_password: '',
  rel_new_password: '',
})

const fetchNewAdminAuth = () => {
  adminAuth.refresh().then((result) => {
    form.name = result.name
    form.slogan = result.slogan
    form.avatar = result.avatar
    form.password = result.password
    form.new_password = result.new_password
    form.rel_new_password = result.rel_new_password
  })
}

const updateAdminAuth = (_adminAuth: Auth) => {
  return loading.promise(putAuth(_adminAuth)).then(() => {
    if (_adminAuth.new_password) {
      notification.info({
        message: '修改了新密码，即将跳转登录页...',
      })
      setTimeout(() => {
        removeToken()
        router.push('/login')
      }, 1688)
    } else {
      fetchNewAdminAuth()
    }
  })
}

// 验证重复输入密码
// const validatePassword = async () => {
//     const password = form.getFieldValue('password')
//     const newPassword = form.getFieldValue('new_password')
//     const reallyNewPassword = form.getFieldValue('rel_new_password')
//     if (!password && !newPassword && !reallyNewPassword) {
//         return
//     }
//     if (newPassword !== reallyNewPassword || password === newPassword) {
//         throw new Error()
//     }
// }

const rules = {
  avatar: [{ required: true, message: '请上传图片' }],
  name: [{ required: true, message: '请输入昵称' }],
  slogan: [{ required: true, message: '请输入签名' }],
  password: [{ required: true, message: '确认新旧密码一致且有效' }],
  new_password: [{ required: true, message: '确认新旧密码一致且有效' }],
  rel_new_password: [{ required: true, message: '确认新旧密码一致且有效' }],
}

const handleSubmit = () => {
  formRef.value.validate().then((newAdminAuth: Auth) => {
    updateAdminAuth({
      ...form,
      ...newAdminAuth,
    }).then(() => {
      // scrollTo(document.body)
    })
  })
}

onMounted(() => {
  fetchNewAdminAuth()
})
</script>
<style lang="less" scoped>
.announcement {
  .toolbar {
    display: flex;
    justify-content: space-between;

    .select {
      width: 130px;
    }
    .search {
      width: 200px;
    }
  }
}
</style>
